<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Layui Template</title>
    <!-- 引入Layui样式文件 -->
    <link rel="stylesheet" href="../../layui/css/layui.css">
</head>

<body>

<!-- Layui容器 -->
<div id="container" class="layui-container">
    <!-- 商品列表 -->
    <div id="goods" class="layui-row">
        <!-- 商品项 -->
    </div>
</div>

<script id="productTpl" type="text/html">
    {{# layui.each(d.data, function(index, item){ }}
    <div class="layui-col-md12" style="margin-top: 20px">
        <!-- 左侧图片 -->
        <div class="layui-col-md2">
            <img src="{{item.img}}" alt="蛋糕图片" style="width: 100%;">
        </div>
        <!-- 中间信息 -->
        <div class="layui-col-md5">
            <h3>{{item.cakename}}</h3>
            <p>价格: ${{item.price}}</p>
            <p>描述: {{item.des}}</p>
        </div>
        <!-- 右侧按钮 -->
        <div class="layui-col-md5" style="text-align: right;">
            <button class="layui-btn layui-btn-primary" data-id="{{item.id}}">修改商品信息</button>
            <button class="layui-btn layui-btn-normal" data-id="{{item.id}}">下架</button>
        </div>
    </div>
    {{# }); }}
</script>
<!-- 引入Layui脚本文件 -->
<script src="../../layui/layui.js"></script>
<script>

    layui.use(['element', 'layer', 'util', 'form'], function () {
        // var element = layui.element;
        var form = layui.form;
        var layer = layui.layer;
        // var util = layui.util;
        var laytpl = layui.laytpl;
        var $ = layui.$;

        $.ajax({
            url: '/main/allgoods', // 替换为后端接口地址
            type: 'GET',
            success: function (data) {
                var getTpl = $("#productTpl").html();//html()是把模板放入頁面
                laytpl(getTpl).render(data, function (str) {
                    $("#goods").html(str);
                });
            },
            error: function () {
                layui.msg('获取商品信息失败，请重试');

            }
        });

        $("#goods").on("click", ".layui-btn-normal", function () {
            var id = $(this).data("id");
            $.ajax({
                url: '/main/delgoods', // 替换为后端接口地址
                type: 'GET',
                data: "id=" + id,
                success: function (data) {
                    var getTpl = $("#productTpl").html();
                    layui.laytpl(getTpl).render(data, function (str) {
                        $("#goods").html(str);
                    });
                },
                error: function () {
                    layui.msg('下架失败，请重试');
                }
            });
        });

        $("#goods").on("click", ".layui-btn-primary", function () {
            var id = $(this).data("id");
            $("#goods").html("");  //清空商品
            $.ajax({
                url: '/main/allgoodsid', // 替换为后端接口地址
                type: 'GET',
                data: "id=" + id,
                success: function (data) {
                    loadNewForm(data.data[0]);
                },
                error: function () {
                    layer.msg('删除失败，请重试');
                }
            });

            $("#goods").on("click", "#newGetbutton", function () {
                // 用户点击“重置”按钮时的处理
                // console.log(data.data[0]);
                $.ajax({
                    url: '/main/allgoodsid', // 替换为后端接口地址
                    type: 'GET',
                    data: "id=" + id,
                    success: function (data) {
                        loadNewForm(data.data[0]);
                    },
                    error: function () {
                        layer.msg('获取信息失败，请重试');
                    }
                });
            });

            function loadNewForm(data) {
                // 生成新的表单模板，并填充数据
                var newFormData = `
        <div class="layui-form-item">
            <div class="layui-input-group">
                <div class="layui-input-split layui-input-prefix">
                    蛋糕名称
                </div>
                <input id="newCakeNameInput" type="text" name="newTel" placeholder="请输入新的蛋糕名称" class="layui-input" value="${data.cakename || ''}">
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-group">
                <div class="layui-input-split layui-input-prefix">
                    价格
                </div>
                <input id="newPriceInput" type="text" name="newTel" placeholder="请输入新的价格" class="layui-input" value="${data.price || ''}">
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-group">
                <div class="layui-input-split layui-input-prefix">
                    描述
                </div>
                <input id="newDescriptionInput" type="text" name="newTel" placeholder="请输入新的描述" class="layui-input" value="${data.des || ''}">
            </div>
        </div>
        <div class="layui-form-item">
            <button id="newUpbutton" class="layui-btn" lay-submit lay-filter="demo2" data-id="${data.id}">更新</button>
<!--            <button id="newGetbutton" type="button" class="layui-btn layui-btn-primary">重置</button>-->
        </div>
        <!-- 文件上传表单 -->
<form class="layui-form" id="uploadForm" action="" method="post">
    <div class="layui-form-item">
        <label class="layui-form-label">上传要更新的图片</label>
        <div class="layui-input-block">
            <input type="file" name="file" lay-verify="required" lay-title="请选择图片" id="fileInput" accept="image/*">
        </div>
    </div>

    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn" type="button" id="uploadButton">更新图片</button>
        </div>
    </div>
</form>
<div id="uploadedImageContainer" class="layui-row"></div>
    `;
                // 将生成的表单模板插入到页面中
                $('#goods').html(newFormData);
                form.render();
            }
            $('#goods').on('click', '#uploadButton', function () {
                var fileInput = $('#fileInput')[0];
                var files = fileInput.files;
                // console.log(id);

                if (files.length > 0) {
                    var reader = new FileReader();
                    reader.onload = function (e) {
                        var base64Data = e.target.result;
                        uploadImage(base64Data);
                    };
                    reader.readAsDataURL(files[0]);
                } else {
                    layer.msg('请选择图片');
                }
            });

            $("#goods").on("click", "#newUpbutton", function () {

                // 获取蛋糕信息
                var id = $(this).data("id")

                // 获取用户输入的数据
                var newCakeName = $("#newCakeNameInput").val();
                var newPrice = $("#newPriceInput").val();
                var newDescription = $("#newDescriptionInput").val();
                // 发送Ajax请求
                $.ajax({
                    url: '/main/updatagoods', // 替换为后端接口地址
                    type: 'POST', // 或 'PUT'，取决于后端接口的要求
                    data:{
                        id: id,
                        cakename: newCakeName,
                        price: newPrice,
                        des: newDescription
                    },// 将数据转为JSON字符串
                    success: function (response) {
                        // 处理更新成功的情况
                        layer.msg('更新成功');
                        // 这里可以根据后端返回的数据进行一些处理
                    },
                    error: function () {
                        // 处理更新失败的情况
                        layer.msg('更新失败，请重试');
                    }
                });
            });

            // 上传图片到后端
            function uploadImage(base64Data) {
                // 使用 Ajax 将 Base64 数据发送到后端
                $.ajax({
                    type: 'POST',
                    url: '/main/upimgbyid', // 替换为后端接口地址
                    data: {
                        id:id,
                        img: base64Data
                    },
                    success: function (response) {
                        var uploadedImageContainer = $('#uploadedImageContainer');
                        uploadedImageContainer.html('<div class="layui-col-md4"><img src="' + base64Data + '" alt="Uploaded Image" class="layui-upload-img"></div>');
                        layer.msg('上传成功');
                    },
                    error: function () {
                        layer.msg('上传失败，请重试');
                    }
                });
            }
        });

    });

</script>
</body>
</html>
